<template>
    <div class="body messageList" v-if="JSON.stringify(listInfo) != '{}'">
        <div
            class="logistics_mesg"
            id="ajax_return"
            v-if="$route.query.type == 0"
        >
            <div
                class="logistics_items"
                txt="通知"
                v-for="(item, index) in listInfo.lists"
                :key="index"
                @click="$router.push('/coupon')"
            >
                <h4>{{ item.send_time_text }}</h4>
                <div class="mesg_cont mesgcont_spec see1154">
                    <p>{{ item.detail.message_title }}</p>
                    <span>
                        <em
                            ><b>{{ item.detail.message_content }}</b></em
                        >
                    </span>

                    <div class="mesgdeta_thi notice_mesgde_thi">
                        <a>立即使用</a>
                    </div>
                </div>
            </div>
        </div>

        <div
            class="logistics_mesg"
            id="ajax_return"
            v-if="$route.query.type == 1"
        >
            <div
                class="logistics_items"
                txt="活动"
                v-for="(item, index) in listInfo.lists"
                :key="index"
            >
                <h4>{{ item.send_time_text }}</h4>
                <div class="mesg_cont mesgcont_active see1150">
                    <p>{{ item.detail.message_title }}</p>
                    <span>
                        <em>
                            <img :src="item.detail.img_uri" />
                            <i v-show="item.detail.status == 1">活动已结束</i>
                        </em>
                        <b>{{ item.detail.message_content }}</b>
                    </span>
                    <a @click="goactiveDetail()" v-show="false">查看详情</a>
                </div>
            </div>
        </div>

        <div
            class="mesg_none"
            v-show="listInfo.lists.length == 0 && pageInfo.pageSatus"
        >
            <img src="../../assets/images/error-img.png" />
            <span>暂无消息记录~</span>
        </div>

        <div class="clearMessage" @click="clearMessage">清空</div>

        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
export default {
    name: '',
    data() {
        return {
            listInfo: {
                lists: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.pageInfo.pageSatus = false;
        this.listInfo.lists = [];
        this.getList();
    },
    methods: {
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getList(data); // 根据type获取订单
        },
        // 获取列表
        getList(page = 1, page_size = 10) {
            axiosPost(
                '/api/user/message_notice_detail',
                {
                    type: this.$route.query.type,
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.lists.forEach((element) => {
                        this.listInfo.lists.push(element);
                    });

                    this.listInfo.page = res.data.page;
                    this.listInfo.user_money = res.data.user_money;
                }
            );
        },
        // 产看活动详情
        goactiveDetail() {},
        // 清空消息
        clearMessage() {
            // 待付款的取消订单
            Dialog.confirm({
                title: '',
                message: '确定要清空消息吗？',
            })
                .then(() => {
                    axiosPost(
                        '/api/user/deletedMessage',
                        {
                            type: this.$route.query.type,
                        },
                        (res) => {
                            // console.log(res);
                            Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                            if (res.status != 1) {
                                return;
                            }
                            this.listInfo.lists = [];
                            this.getList();
                        }
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
    },
};
</script>

<style lang="less" scope>
.messageList {
    .clearMessage {
        font-size: 0.64rem;
        color: #666;
        width: 2.0907rem;
        height: 2.0907rem;
        text-align: center;
        line-height: 2.0907rem;
        background: transparent;
        position: fixed;
        right: 0.2rem;
        top: 0;
    }
    /*消息中心*/
    .mesg_center {
        width: 100%;
        height: auto;
    }
    .mesg_caten1,
    .mesg_caten2 {
        width: 92%;
        padding: 0 4%;
    }
    .mesg_caten1 .mesg_items:last-child {
        border: none;
    }
    .mesg_items {
        width: 100%;
        height: auto;
        padding: 0.512rem 0;
        border-bottom: 1px solid #efefef;
        overflow: hidden;
    }
    .mesg_items .mesg_img {
        width: 1.749334rem;
        height: 1.749334rem;
        float: left;
        display: block;
        position: relative;
    }
    .mesg_items .mesg_img img {
        width: 100%;
        height: 100%;
        border-radius: 0.256rem;
    }
    .mesg_items .mesg_img i {
        width: 0.768rem;
        height: 0.768rem;
        background-color: #e91b1b;
        border-radius: 50%;
        font-size: 0.426667rem;
        color: #fff;
        line-height: 0.768rem;
        text-align: center;
        position: absolute;
        right: -0.32rem;
        top: -0.32rem;
    }
    .mesg_items .mesg_thumb {
        width: 84%;
        float: right;
        display: block;
        height: 1.749334rem;
    }
    .mesg_items .mesg_thumb em {
        display: block;
        line-height: 0.64rem;
        overflow: hidden;
    }
    .mesg_items .mesg_thumb em b {
        font-size: 0.597334rem;
        color: #333;
        float: left;
    }
    .mesg_items .mesg_thumb em i {
        font-size: 0.469334rem;
        color: #999;
        float: right;
    }
    .mesg_items .mesg_thumb p {
        font-size: 0.512rem;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 0.512rem;
    }
    .bot_line {
        width: 100%;
        height: 0.426667rem;
        background-color: #efefef;
        margin: 0;
        border: none;
    }
    /*物流消息*/
    .mesg_tit {
        background-color: #fff;
    }
    .header button {
        height: 1.92rem;
        border: none;
        float: right;
        font-size: 0.64rem;
        color: #666;
        background: none;
        outline: none;
    }
    .logistics_mesg {
        width: 100%;
        height: auto;
        padding-bottom: 1.28rem;
    }
    .logistics_items {
        width: 92%;
        padding: 0 4%;
        box-sizing: content-box;
    }
    .logistics_items h4 {
        height: 1.408rem;
        line-height: 1.408rem;
        padding-top: 0.384rem;
        font-size: 0.512rem;
        color: #666;
        box-sizing: content-box;
        font-weight: normal;
        text-align: center;
    }
    .mesg_cont {
        width: 94%;
        background-color: #fff;
        border: 1px solid #dadada;
        border-radius: 10px;
        padding: 0.64rem 3% 0;
        text-align: left;
        box-sizing: content-box;
    }
    .mesg_cont p {
        font-size: 0.64rem;
        color: #333;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 0.64rem;
    }
    .mesg_cont p i {
        width: 0.384rem;
        height: 0.384rem;
        background-color: #ff3939;
        border-radius: 50%;
        position: absolute;
        right: 0.128rem;
        top: 0.128rem;
    }
    .mesg_cont span {
        display: block;
        margin: 0.512rem 0;
        overflow: hidden;
    }
    .mesg_cont span em {
        width: 80%;
        font-size: 0.512rem;
        float: left;
    }
    .mesg_cont span em b {
        color: #333;
        line-height: 0.768rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .mesg_cont span em i {
        color: #999;
        margin-top: 0.64rem;
    }
    .mesg_cont span img {
        width: 2.048rem;
        height: 2.048rem;
        float: right;
    }
    .mesg_cont a {
        display: block;
        width: 100%;
        height: 1.408rem;
        line-height: 1.408rem;
        color: #999;
        font-size: 0.512rem;
        border-top: 1px solid #e8e8e8;
        background: url(../../assets/images/yr.png) center right no-repeat;
        background-size: 0.341334rem 0.597334rem;
    }
    /*通知消息*/
    .mesgcont_spec span em {
        margin-top: 0.256rem;
    }
    /*活动消息*/
    .mesgcont_active span em {
        width: 100%;
        height: 5.973334rem;
        position: relative;
        text-align: center;
    }
    .mesgcont_active span em img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        float: none;
    }
    .mesgcont_active span em i {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        margin-top: 0;
        line-height: 5.973334rem;
        font-size: 0.768rem;
        color: #fff;
        font-weight: bold;
        letter-spacing: 0.128rem;
    }
    .mesgcont_active span b {
        height: 1.536rem;
        font-size: 0.512rem;
        color: #333;
        line-height: 0.768rem;
        padding: 0.384rem 0.128rem 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /*消息详情*/
    .mesg_detail {
        width: 92%;
        height: auto;
        text-align: center;
        padding: 0 4%;
        padding-top: 1.28rem;
    }
    .mesg_detail h2 {
        font-size: 0.64rem;
        color: #333;
        font-weight: bloder;
        letter-spacing: 0.064rem;
        line-height: 1.024rem;
    }
    .mesg_info {
        font-size: 0.512rem;
        color: #999;
        margin: 0.64rem 0;
        line-height: 0.64rem;
    }
    .mesg_info b {
        margin-right: 0.64rem;
    }
    .mesg_con {
        font-size: 0.64rem;
        color: #333;
        line-height: 0.896rem;
        text-align: justify;
    }
    .mesg_con img {
        max-width: 100%;
        height: auto;
        margin: 0.64rem 0;
    }
    /*暂无消息*/
    .header {
        width: 92%;
        height: 1.92rem;
        line-height: 1.92rem;
        text-align: center;
        padding: 0 4%;
        border-bottom: 1px solid #dedede;
    }
    .header a {
        float: left;
    }
    .header a img {
        height: 0.896rem;
        vertical-align: middle;
    }
    .header span {
        font-size: 0.768rem;
        color: #333;
    }
    .mesg_none {
        width: 100%;
        text-align: center;
    }
    .mesg_none img {
        height: 9.6rem;
        margin-top: 3.84rem;
    }
    .mesg_none span {
        font-size: 0.64rem;
        color: #666;
        display: block;
    }
    /*清空消息*/
    .mesg_bounce {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
    }
    .mesg_clear {
        width: 88%;
        background-color: #efefef;
        border-radius: 10px;
        overflow: hidden;
        position: fixed;
        left: 6%;
        top: 10.24rem;
    }
    .mesg_clear b {
        display: block;
        font-size: 0.682667rem;
        color: #333;
        font-weight: bolder;
        padding: 1.792rem 0;
        text-align: center;
    }
    .mesg_clear span {
        display: block;
        overflow: hidden;
    }
    .mesg_clear span input {
        width: 50%;
        font-size: 0.597334rem;
        height: 1.792rem;
        line-height: 1.792rem;
        border: none;
        float: left;
    }
    .mesg_clear span input.mesg_cancel {
        border-top: 1px solid #d6d6d6;
        color: #333;
    }
    .mesg_clear span input.mesg_ensure {
        color: #fff;
        background-color: #ff4040;
    }
}
</style>
